<template>
  <div class="container">
    <div ref="lrc" class="content" >
      {{ getAllKey }}
      <p v-show="(parseInt(currentTime) >= keyArr[index]) && (parseInt(currentTime) < keyArr[index+1])"
      v-for="(item,key,index) in lrcData" :key="index">{{ item }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name:'lrc',
    data(){
      return{
        songsData:{},
        lrcData:{},
        keyArr:[]
      }
    },
    props:{
      songid:{
        type:[String,Number],
        default:''
      },
      currentTime:{
        type:[String,Number],
        default:0
      },
      durationTime:{
        type:[String,Number],
        default:0
      }
    },
    //存储key
    computed:{
      getAllKey(){
        for(var i in this.lrcData){
          this.keyArr.push(i)
        }
        console.log(this.keyArr)
      }
    },
    mounted(){
      let url = this.HOST + '/v1/restserver/ting?method=baidu.ting.song.lry&songid=' + this.songid
      this.$axios.get(url)
        .then(res => {
          this.songsData = res.data.title
          console.log(this.songsData);
          // 数据格式处理
          var lyrics = res.data.lrcContent.split("\n");
          var lrcObj = {};
          for(var i = 0 ;i < lyrics.length;i++){
            var lyric = decodeURIComponent(lyrics[i]);
            var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
            var timeRegExpArr = lyric.match(timeReg);
            if(!timeRegExpArr)continue;
            var clause = lyric.replace(timeReg,'');
              for(var k = 0,h = timeRegExpArr.length;k < h;k++){
                var t = timeRegExpArr[k];
                var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                    sec = Number(String(t.match(/\:\d*/i)).slice(1));
                var time = min * 60 + sec;
                lrcObj[time] = clause;
              }
          }
          this.lrcData = lrcObj;
          console.log(this.lrcData)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
</script>

<style scoped>
.container{
  width: 100%;
  height: 64px;
}

.content{
  width: 100%;
  height: 64px;
  line-height: 2em;
  overflow: hidden;
}

p{
  height: 32px;
  padding-top: 13px
}
</style>